<template>
    <div>
        <div class="message-list">
            <div style="display: table-row;">

                <div class="message-list-title">
                </div>
                <div class="message-list-title" style="text-align: left">
                    名称
                </div>
                <div class="message-list-title">
                    发布时间
                </div>
                <div class="message-list-title">
                    状态
                </div>
                <div class="message-list-title"></div>

            </div>
            <div style="display: table-row;" v-for="(item,index) in unreadList"  :key="item.id">
                <div class="message-list-item" style="width: 10%;">
                    {{index + 1}}
                </div>
                <div class="message-list-item-name" style="width: 20%;">
                    {{item.title}}
                </div>
                <div class="message-list-item" style="width: 20%">
                    {{item.create_time}}
                </div>
                <div class="message-list-item key-word" style="width: 15%" v-if="item.isRead===0">
                    待阅读
                </div>
                <div class="message-list-item key-word" style="width: 15%" v-if="item.isRead===1">
                    已阅读
                </div>
                <div class="message-list-item" style="width: 5%;">
                    <el-button class="detail" size="mini" @click="readNotify(item)">详情</el-button>
                </div>
            </div>
        </div>

        <div v-if="!inMain" class="paginationClass">
            <el-pagination
                    @current-change=currentChange
                    :current-page.sync=currentPage
                    :page-size="size"
                    layout="prev, pager, next, jumper"
                    :total=total
                    style="margin-right: 40px">
            </el-pagination>

        </div>

    </div>
</template>

<script type="text/ecmascript-6">
    import Cookies from 'js-cookie'
    import API from '../../api'

    export default {
        name: "ph_unread",
        data () {
            return {
                token: Cookies.get('token'),
                unreadList:{},
                inMain: false,
                total:0,
                currentPage:1,
                size:30
            }


        },
        mounted:function(){
            this.getUnreadList();
        },
        methods: {
            /**
             * 计算发布时间
             * */
            getDate(timestamp) {
                let now = new Date(timestamp),
                    y = now.getFullYear(),
                    m = now.getMonth() + 1,
                    d = now.getDate();
                return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " "
            },
            currentChange(val){
                this.currentPage = val;
                this.getNotifyList();
            },
            /**
             * 获取征集列表
             * */
            getUnreadList(){
                // 判断是否 不在首页
                this.inMain = this.$route.path === '/phone/message/';
                if (!this.inMain) {
                    let data ={
                        token: this.token,
                        orderby: {},
                        page: 1,
                        size: 5,
                    };
                    API.userNotifyList(data).then(res => {
                        if(res.code){
                            alert(res.message);
                            return;
                        }
                        for (let i = 0;i<res.list.length;i++){
                            let obj = res.list[i];
                            if (obj.isRead===1){
                                res.list.splice(i,1);
                                i--
                            }
                        }
                        this.unreadList =  res.list; //过滤已读消息
                        console.log(res);
                        return res;

                    }).catch(msg => {
                        alert('操作失败')
                    })
                } else {
                    let data ={
                        token: this.token,
                        orderby: {},
                        page: 1,
                        size: 20,
                    };
                    API.userNotifyList(data).then(res => {
                        if(res.code){
                            alert(res.message);
                            return;
                        }
                        for (let i = 0;i<res.list.length;i++){
                            let obj = res.list[i];
                            if (obj.isRead===1){
                                res.list.splice(i,1);
                                i--
                            }
                        }
                        this.unreadList =  res.list; //过滤已读消息

                        return res;

                    }).catch(msg => {
                        alert('操作失败');
                    })
                }
            },
            /**
             * 阅读
             * */
            readNotify(item){
                this.$router.push({path: `/phone/unread/${item.query_id}/detail`});
            },
        }
    }
</script>

<style scoped>
    .message-list {
        display: table;
        width: 100%;
        padding: 20px 10px 15px;
    }

    .message-list-title {
        display: table-cell;
        font-size: 15px;
        text-align: center;
        color: rgb(128, 128, 128);
    }

    .message-list-item {
        display: table-cell;
        font-size: 12px;
        text-align: center;
    }
    .message-list-item-name {
        display: table-cell;
        font-size: 12px;
        text-align: left;
    }
    .blueLine{
        background-color: #e4efff;
    }
    .paginationClass {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: 5%;
        padding-bottom: 15px;
        padding-top: 10px;
    }


    .detail{
        display: table-cell;
        color: #fff;
        background: rgb(80, 137, 185);
    }

    .key-word {
        color: #ff0000;
    }

</style>
